<script setup>
  import {ref,reactive} from 'vue'
  //图片地址数组
  const imgs=[
    "src/imgs/1.jpeg",
    "src/imgs/2.jpeg",
    "src/imgs/3.jpeg",
  ]
  //用于绑定的当前图片地址
  const imgurl=ref(imgs[0])
  //当前显示的图片索引
  const index=ref(0)

  //上一张
  const prevclick=()=>{
  //此处写代码
    index.value = index.value == 0 ? imgs.length - 1 : index.value - 1
    imgurl.value = imgs[index.value]
  }
  //下一张
  const nextclick=()=>{
    //此处写代码
    index.value = index.value == imgs.length - 1 ? 0 : index.value + 1
    imgurl.value = imgs[index.value]
  }

  //每隔3秒切换下一张
  setInterval(()=>{
    //此处写代码
    index.value = index.value == imgs.length - 1 ? 0 : index.value + 1
    imgurl.value = imgs[index.value]
  },3000)

  //点击小圆点
  const dotclick=(i)=>{
    //此处写代码
    index.value = i
    imgurl.value = imgs[i]
  }
</script>

<template>
  <div class="carousel">
    <img  :src="imgurl"  alt="">
    <span class="prev" @click="prevclick">&lt;</span>
    <span class="next" @click="nextclick">&gt;</span>

    <div class="dots">
      <!--   使用v-for 修改下面的代码 , 点击小圆点时，相应的图显示-->
      <!--      <span class="dot active"></span>-->
      <!--      <span class="dot "></span>-->
      <!--      <span class="dot "></span>-->
      <span v-for="(img, i) in imgs" :key="i" class="dot" :class="{ active: index === i }" @click="dotclick(i)"></span>
    </div>
  </div>

  <div>
    <router-link to="/">home</router-link> |
    <router-link to="/About">about</router-link>
  </div>
  <hr>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
  .carousel {
    width: 1000px;
    height: 240px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
  }
  .carousel img {
    width: 1000px;
    height: 240px;
  }
  .carousel .prev, .carousel .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
  }
  .carousel .prev {
    left: 0;
  }
  .carousel .next {
    right: 0;
  }
  .dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  .dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
  }
  /* 当前小圆点的样式 */
  .dot.active {
    background-color: #fff;
  }
</style>
